<template>
  <div class="app-container">
    <el-card class="card">
      <el-row>
        <el-col :span="4">
          <span style="font-size:14px; font-weight: bold;">当前总成交</span>
          <div style="padding-top:8px">
            <span style="font-size:11px;">{{ currentScore / 100 }}元</span>
          </div>
        </el-col>
        <el-col :span="3">
          <span style="font-size:14px; font-weight: bold;">总限额</span>
          <div style="padding-top:8px">
            <span style="font-size:11px;">{{ limitScore / 100 }}元</span>
          </div>
        </el-col>
        <el-col :span="4">
          <span style="font-size:14px; font-weight: bold;">剩余金额</span>
          <div style="padding-top:8px">
            <span style="font-size:11px;">{{ restScore / 100 }}元</span>
          </div>
        </el-col>
        <el-col :span="3">
          <span style="font-size:14px; font-weight: bold;">总单数</span>
          <div style="padding-top:8px">
            <span style="font-size:11px;">{{ orderSize }}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <span style="font-size:14px; font-weight: bold;">成交单数</span>
          <div style="padding-top:8px">
            <span style="font-size:11px;">{{ doneSize }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-row style="paddingTop: 32px;">
      <el-table
        :data="userCounts"
        size="mini"
        border
        height="540px"
        highlight-current-row
      >
        <el-table-column label="用户" align="center" min-width="10%">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="金额总限" align="center" min-width="10%">
          <template slot-scope="{row}">
            <span>{{ row.score_limit / 100 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="成交金额" align="center" min-width="10%">
          <template slot-scope="{row}">
            <span>{{ row.used_score ? row.used_score / 100 : 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="剩余金额" align="center" min-width="10%">
          <template slot-scope="{row}">
            <span>{{ row.score_limit / 100 > 0 ? (row.score_limit - row.used_score) / 100 : 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单量限制" align="center" min-width="10%">
          <template slot-scope="{row}">
            <span>{{ row.order_size_limit }}</span>
          </template>
        </el-table-column>
        <el-table-column label="轮询单数" align="center" min-width="10%">
          <template slot-scope="{row}">
            <span>{{ row.order_size_looped ? row.order_size_looped : 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="成交单数" align="center" min-width="10%">
          <template slot-scope="{row}">
            <span>{{ row.order_size_done ? row.order_size_done : 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="利率" align="center" min-width="10%">
          <template slot-scope="{row}">
            <span>{{ row.interest_rate }} % </span>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="10%" align="center" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-switch
              :value="row.pause === 1"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="toggleUserLoop(row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="10%" align="center" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-tag size="mini" effect="dark" type="success" @click="handleEditUser(row)">修改</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-dialog
      :visible.sync="dialogModifyUserVisible"
      title="用户信息修改"
      width="40%"
    >
      <el-form label-width="80px" :model="formEditUser">
        <el-form-item label="限额">
          <el-input
            v-model="formEditUser.score"
            style="width:300px"
            type="number"
            :disabled="rootUserId == formEditUser.userId && !isAdmin()"
          >
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="利率">
          <el-input v-model="formEditUser.interest_rate" :disabled="rootUserId == formEditUser.userId && !isAdmin()" type="number" style="width:300px">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="单量限制">
          <el-input v-model="formEditUser.order_limit" type="number" style="width:300px">
            <template slot="append">单</template>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogModifyUserVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitFormEditUser">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getUserCountInfo } from '@/api/count'
import { setPause, editManageInfo, getManageInfo } from '@/api/user'
import { Message } from 'element-ui'
import { mapGetters } from 'vuex'

export default {
  name: 'CodeMurchnt',
  data() {
    return {
      currentScore: 0,
      limitScore: 0,
      restScore: 0,
      orderSize: 0,
      doneSize: 0,
      multipleSelection: [],
      userCounts: [],
      dialogModifyUserVisible: false,
      formEditUser: {
        score: 0,
        userId: '',
        interest_rate: 0,
        order_limit: 0,
        p_rate: 0
      }
    }
  },
  computed: mapGetters({
    rootUserId: 'id',
    roles: 'roles'
  }),
  created() {
    this.getUserCountInfo()
    this.getUserCounts()
    // const timer = setInterval(() => {
    //   this.getUserCountInfo()
    //   this.getStores()
    // }, 5000)
    // // 清理定时器
    // this.$once('hook:beforeDestroy', () => { clearInterval(timer) })
  },
  methods: {
    isAdmin() { return this.roles.includes('admin') },
    getUserCountInfo() {
      getUserCountInfo(this.rootUserId).then(response => {
        const { currentScore, limitScore, orderSize, doneSize } = response.data
        this.currentScore = currentScore
        this.limitScore = limitScore
        const restScore = this.limitScore - this.currentScore
        this.restScore = restScore > 0 ? restScore : 0
        this.orderSize = orderSize
        this.doneSize = doneSize
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    toggleUserLoop(row) {
      const pause = row.pause ? 0 : 1
      console.log(pause)
      setPause(row.id, pause).then(response => {
        Message.success('设置成功')
        this.getUserCounts()
        this.getUserCountInfo()
      })
    },
    getUserCounts() {
      getManageInfo(this.rootUserId).then(response => {
        this.userCounts = response.data
      })
    },
    handleEditUser(row) {
      this.formEditUser.score = row.score_limit / 100
      this.formEditUser.userId = row.id
      this.formEditUser.interest_rate = row.interest_rate
      this.formEditUser.p_rate = row.p_rate
      this.formEditUser.order_limit = row.order_size_limit
      this.dialogModifyUserVisible = true
    },
    submitFormEditUser() {
      const p_rate = this.formEditUser.p_rate
      const rate = this.formEditUser.interest_rate ? this.formEditUser.interest_rate : 0
      const score = this.formEditUser.score ? this.formEditUser.score : 0
      const limit = this.formEditUser.order_limit ? this.formEditUser.order_limit : 0
      console.log(limit)
      if (p_rate === undefined || rate <= p_rate) {
        editManageInfo(this.formEditUser.userId, score * 100, rate, limit)
          .then(resp => {
            Message.success('操作成功')
            this.getUserCountInfo()
            this.getUserCounts()
            this.dialogModifyUserVisible = false
          })
      } else {
        Message.warning(`利率必须小于等于${this.formEditUser.p_rate}%`)
      }
    }
  }
}
</script>

<style scoped>
</style>
